<template>
  <div>
    <van-search
      placeholder="请输入搜索关键词"
      v-model="keyword"
      @keydown.enter="handleSearch"
    />

    <div class="content" v-for="item of songs" :key="item.id">
      <div><img :src="item.img" /></div>
      <div>
        <div>《{{ item.name }}》</div>
        <div>{{ item.size }}首,by {{ item.artists }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      songs: [],
    };
  },
  methods: {
    handleSearch() {
      this.$http(
        `http://47.108.197.28:3000/search?keywords=${this.keyword}`
      ).then((res) => {
        res.data.result.songs.forEach((item) => {
          var { id, name, artists, album } = item;
          this.$http(`http://47.108.197.28:3000/song/detail?ids=${id}`).then(
            (res) => {
              res.data.songs.forEach((k) => {
                var { al } = k;
                this.songs.push({
                  size: album.size,
                  img: al.picUrl,
                  name,
                  artists: artists[0].name,
                });
              });
            }
          );
        });
      });
    },
  },
};
</script>

<style scoped>
.content{
  display: flex;
  margin: 10px 15px;
}
.content>div:nth-child(1){
  width: 30%;
}
.content>div:nth-child(2){
  width: 70%;
  font-size: 30px;
}
.content div:nth-child(2) div{
  padding: 20px;
}
.content div:nth-child(2) div:nth-child(2){
  width: 100%;
  font-size: 20px;
  color: gray;
}
.content img{
  width: 200px;
  height: 200px;
  border-radius: 5px;
}
</style>